<template>
  <div>
    <el-dialog
      class="base-dialog"
      :custom-class="'panna-dialog_medium'"
      title="客户"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <p slot="title">客户</p>
      <!-- 操作栏 -->
      <div class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="addCustomer">新增</el-button>
      </div>
      <el-table ref="table" border fit highlight-current-row :data="tableData" height="300px">
        <el-table-column prop="customerName" label="客户名称">
          <template slot-scope="scope">
            <a style="color: blue" @click="clickCustomerName(scope.row)">
              {{
              scope.row.customerName
              }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="公司地址" />
        <el-table-column prop="num" label="客户编号" />
      </el-table>
      <!-- 分页 -->
      <BasePagination
        :total="pageInfo.total"
        :current-page="pageInfo.pageIndex"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
      <CustomerMessageDialog v-model="isShowDialog" @getList="init" />
    </el-dialog>
  </div>
</template>

<script>
import { getCustomerList } from "../../../api/EntrustManage/EntrustOrder.js";
 import CustomerMessageDialog from "@/ModuleSysBusiness/views/SysBusiness/Customer/CustomerMessageDialog.vue";

export default {
  name: "ChoiceCustomerDialog",
  components: {
    CustomerMessageDialog
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      customerData: {},
      isShowDialog: false,
      dialogVisible: false,
      tableData: [],
      filterForm: {
        customerName: "",
      },
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
  },
  methods: {
    // 新增客户
    addCustomer() {
      this.isShowDialog = true;
    },
    // 点击客户名称
    clickCustomerName(row) {
      this.customerData = row;
      this.handleClose();
    },
    // 初始化
    async init() {
      getCustomerList({ ...this.filterForm, ...this.pageInfo }).then((res) => {
        this.tableData = res.data.dataList ? res.data.dataList : [];
        this.pageInfo.total = res.data.total;
      });
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.init();
    },
    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.init();
    },
    // 关闭弹框
    handleClose() {
      this.$emit("input", false);
      this.$emit("customerClose", this.customerData);
    },
  },
};
</script>
